* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 水平居中效果 */
    height: 100vh; 
    /* 可视高度 */
    /* 垂直居中效果 */
    overflow: hidden;
    margin: 0;
}

/* 对每个盒子进行设置 */
.container {
    display: flex;
    width: 90vw; 
    /* 可视宽度 */
}

.panel {
    background-size: cover;
    /* 按比例将盒子填满 */
    background-position: center;
    background-repeat: no-repeat;
    /* 图像不重复 */
    height: 80vh;
    border-radius: 50px;
    /* 设置圆角 */
    color: #fff;
    /* 文字设置 */
    cursor: pointer;
    /* 设置鼠标样式 */
    flex: 0.5;
    margin: 10px;
    /* 设置间隔 */
    position: relative;
    /* 父元素相对定位 */
}

.panel h3 {
    font-size: 24px;
    position: absolute;
    /* 子元素绝对定位 */
    /* 相对于panel进行定位 */
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
    /* 透明度为0，点开才显示 */
}

.panel.active {
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    /* 显示文字 */
    transition: opacity 0.3s ease-in 0.4s;
}

